<template>
  <div>
    <HomeNav/>
    <el-scrollbar class='home'>
      <div class="content">
        <div class='todo'>
          <to-do/>
          <my-handle/>
        </div>

        <div class="application">
          <div class='application-header'>
            <span>轻应用 <i class="el-icon-setting"/></span>
            <!-- <el-button icon="el-icon-plus" type="primary" @click="filterShow = true">新建应用</el-button> -->
          </div>
          
          <div class='item-wrap'>
            <template v-if='apps.length > 0'>
              <Application v-for="(item, index) of apps " :key="index" :apps="item"/>
            </template>
            <el-empty v-else class="empty" description="暂无应用"></el-empty>
          </div>
        </div>

        <div v-if="innerApps.length > 0" class="application">
          <div class='application-header'>
            <span>内置应用 <i class="el-icon-setting"/></span>
          </div>
          <div class='item-wrap'>
            <Application v-for="item in innerApps " :key="item.appName" :apps="item"/>
          </div>
        </div>

        <filter-dialog :show.sync="filterShow" title="创建空白应用"></filter-dialog>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import {  HomeNav, ToDo, MyHandle, Application } from "./components"
import filterDialog from '@/components/generator/filterDialog'
export default {
  components:{
    HomeNav,
    ToDo,
    MyHandle,
    Application,
    filterDialog
  },
  data(){
    return{
      filterShow: false,
      loading: true
      // apps:[ { appCode: "no12",appName: "你好1",id: 2}],
      // innerApps:[
      //   {name:'通讯录',id:2},
      //   {name:'应用搭建',id:2}
      // ]
    }
  },
  created(){
    this.init()
  },
  methods:{
    init(){
      this.$store.dispatch('application/getAllApp')
    }
  },
  computed:{
    apps(){
      return this.$store.state.application.apps
    },
    innerApps(){
      return this.$store.state.application.innerApps
    }
  }
}
</script>

<style lang="scss" scoped>
$homeHeight: calc(100vh - 60px);
.home{
  ::v-deep .el-scrollbar__wrap{
    overflow-x: hidden;
  }
  height: $homeHeight;
  background: #f5f5f7;
  .content{
    overflow: hidden;
    .todo{
      width: 85%;
      height: 144px;
      border-radius: 6px;
      margin: 20px auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .application{
      background: #fff;
      width: 85%;
      border-radius: 6px;
      margin: 20px auto;
      &-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 0 20px;
        font-weight: 500;
        font-size: 18px;
        line-height: 32px;
        i:hover{
          color: #0DB3A6
        }
      }
      &-item{
        display: flex;
        flex-direction:column ;
        .el-icon-s-promotion{
          font-size: 50px;
        }
        &:hover{
          color: rgb(59, 22, 22);
        }
      }
      .item-wrap{
        display: flex;
        flex-wrap: wrap;
        .empty{
          margin: 0 auto;
        }
      }
    }
  }
}


</style>